@import '~styles/settings.scss';

$map-menu-items-size: rem(76px);

.c-menu-desktop {
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  display: block;
  overflow-y: auto;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  width: $map-menu-items-size;
  height: 100%;

  @media screen and (min-height: 684px) {
    display: flex;
    overflow-y: hidden;
  }

  &::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: rem(1px);
    height: 100%;
    background-color: $white-calcium;
    z-index: 1;
  }

  .datasets-tile,
  .search-tile {
    border-top: solid 1px transparent;
    border-bottom: solid 1px transparent;

    &.active {
      border-top-color: $border;
      border-bottom-color: $border;
    }
  }
}
